<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="会员ID">
        <el-input v-model="formInline.user" placeholder="请输入会员ID" clearable />
      </el-form-item>
      <el-form-item label="会员号">
        <el-input v-model="formInline.user" placeholder="请输入会员号" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formInline.user" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="formInline.user" placeholder="请输入名称" clearable />
      </el-form-item>
      <el-form-item label="会员等级">
        <el-select
          v-model="formInline.region"
          placeholder="会员等级"
          clearable
        >
          <el-option label="普通会员" value="普通会员" />
          <el-option label="铜牌会员" value="铜牌会员" />
          <el-option label="银牌会员" value="银牌会员" />
          <el-option label="金牌会员" value="金牌会员" />
          <el-option label="钻牌会员" value="钻牌会员" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="demo-datetime-picker">
            <div class="block">
            <span class="demonstration">注册时间</span>
            <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="开始时间"
            />
            </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="demo-datetime-picker">
            <div class="block">
            <span class="demonstration">Default</span>
            <el-date-picker
                v-model="value2"
                type="datetime"
                placeholder="Select date and time"
            />
            </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Query</el-button>
      </el-form-item>
    </el-form>
  </template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

const formInline = reactive({
  user: '',
  region: '',
  date: '',
});
const value1 = ref('');
const value2 = ref('');
const onSubmit = () => {
  console.log('submit!');
};
</script>

  <style lang="scss" scoped>
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  .demo-form-inline{
    box-sizing: border-box;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
  }
  </style>
